import $ from "jquery";
import md from "../lib/markdownit";
// TextTools类,用于处理文本消息的工具类
export class TextTool {
  constructor(tool_id, init_text) {
    this.tool_id = tool_id;
    this.text = init_text;
    this.dom = null;
  }
  // 用于接收和展示消息,嵌入到聊天窗口中
  render(jq_dom) {
    // 直接将工具添加到dom中
    this.dom = TextTool.createTool(this.tool_id, this.text);
    jq_dom.append(this.dom);
    return this.dom;
  }
  static createTool(tool_id, text) {
    // 创建工具dom,只在第一次执行
    return $(
      `
        <div class="llm-chat-tools text-tools" data-tool-id="${tool_id}">
            ${md.render(text)}
        </div>
        `
    );
  }
  // 实时接收消息并更新工具
  stream(text) {
    this.text += text;
    // 更新工具dom
    $(`[data-tool-id="${this.tool_id}"]`).html(md.render(this.text));
  }
}

export class AgentTool {
  // 用于展示Agent使用的工具
  constructor(tool_id, label, input) {
    this.tool_id = tool_id;
    this.label = label;
    this.input = input;
    this.dom = null;
  }
  // 用于接收和展示消息,嵌入到聊天窗口中
  render(jq_dom) {
    // 直接将工具添加到dom中
    this.dom = AgentTool.createTool(this.tool_id, this.label, this.input);
    jq_dom.append(this.dom);
    return this.dom;
  }
  static createTool(tool_id, label, request) {
    // 创建工具dom,只在第一次执行
    return $(
      `
          <div class="llm-chat-tools agent-tools" data-tool-id="${tool_id}">
            <div class="llm-chat-tools-title">
                <i class="fa fa-commenting-o"></i>
                <span>${label}</span>
                <i class="fa fa-angle-right"></i>
                <i class="fa fa-angle-down"></i>
            </div>
            <div>
                <div class="llm-chat-tools-request">${request}</div>
                <div class="llm-chat-tools-response"></div>
            </div>
          </div>
          `
    );
  }
  // 实时接收消息并更新工具
  stream(response) {
    // response是一个json对象,一次性赋值
    this.response = response;
    // 更新工具dom
    $(`[data-tool-id="${this.tool_id}"] .llm-chat-tools-response`).html(
      this.response
    );
  }
}
